<template>
	<div>
		<div class="coursecomtwo">
			<el-image class="left thumbnail" :src="courseinfo.Displayimages">
				<template #error>
					<div class="image-slot">
						<el-icon><PictureFilled /></el-icon>
					</div>
				</template>
			</el-image>
			<div class="coreinfo" style="flex: 1">
				<div class="ThinLineLayout minaxgap grey">
					<span class="bold">{{ courseinfo.title }}</span>
					<div class="Horizontalspacing space-around minfont">
						<router-link :to="/homepage/ + courseinfo.user.id">
							<div class="Horizontalspacing minxgap">
								<el-avatar class="center" :src="courseinfo.user.Avatar" :size="20">
									<el-icon>
										<Edit />
									</el-icon>
								</el-avatar>
								<div class="center coreqzsolld truncate-texts">{{ courseinfo.user.nickname ? courseinfo.user.nickname : courseinfo.user.username }}</div>
							</div>
						</router-link>
						<div class="Horizontalspacing minxgap">
							<el-icon class="center"><View /></el-icon>
							<span class="center">{{ courseinfo.PageView }}</span>
						</div>
					</div>
				</div>
				<div class="corebox">
					<div class="center Horizontalspacing">
						<span class="corezzcn">郑重承诺</span>
						<span class="center">丨DEXC提供安全交易、信息保真!</span>
					</div>
				</div>
				<div class="Horizontalspacing minaxgap">
					<div class="my-label center">价格:</div>
					<div class="my-content center">{{ courseinfo.saleperiod ? (courseinfo.discount > 0 ? '$' + courseinfo.discount : '免费') : courseinfo.Price > 0 ? '$' + courseinfo.Price : '免费' }}</div>
					<el-text class="center" v-if="courseinfo.saleperiod" tag="del">原价:{{ courseinfo.Price }}</el-text>
					<el-tag class="left" v-if="courseinfo.saleperiod" type="danger" effect="plain"><el-countdown format="[将于]D[天]HH[时]mm[分]ss[秒后恢复原价]" :value="parseInt(courseinfo.DiscountEnd)" :value-style="{ fontSize: '10px' }" /></el-tag>
					<div class="appblock">
						<el-tag v-if="courseinfo.saleperiod" type="danger" effect="plain"><el-countdown format="D[天]HH[时]mm[分]ss[秒后恢复原价]" :value="parseInt(courseinfo.DiscountEnd)" :value-style="{ fontSize: '10px' }" /></el-tag>
					</div>
				</div>
				<div v-if="courseinfo.coupon.length > 0" class="Horizontalspacing minaxgap" @click="vouchers()">
					<div class="my-label center">领券:</div>

					<el-tag v-for="(item, index) in courseinfo.coupon.slice(0, 3)" :key="index" effect="dark" type="danger">{{ item.Conditions > 0 ? '满 $' + item.Conditions + ' 减 $' + item.Amount : '通用:减 $' + item.Amount }}</el-tag>
				</div>
				<!-- pc -->
				<div class="left">
					<el-button v-if="Whethertobuy" class="cobutton bold" type="primary" @click="study()"
						><el-icon class="el-icon--left"><ShoppingTrolley /></el-icon> 开始学习
					</el-button>
					<el-button :loading="playloading" v-else class="cobutton bold" type="primary" @click="purchase()"
						><el-icon class="el-icon--left"><ShoppingTrolley /></el-icon> 购买课程
					</el-button>

					<el-button class="cobutton bold" type="warning" @click="Savecourse()">
						<el-icon v-if="!Save" class="el-icon--left"><Star /></el-icon>
						<el-icon v-else class="el-icon--left"><StarFilled /></el-icon>{{ Save ? '已收藏' : '收藏课程' }}
					</el-button>
					<el-button class="cobutton bold" type="danger">
						<el-icon class="el-icon--left"><Headset /></el-icon> 联系客服
					</el-button>
				</div>
				<!-- app -->
				<div class="appblock">
					<el-button size="small" v-if="Whethertobuy" class="cobutton bold" type="primary" @click="study()"
						><el-icon class="el-icon--left"><ShoppingTrolley /></el-icon> 开始学习
					</el-button>
					<el-button size="small" :loading="playloading" v-else class="cobutton bold" type="primary" @click="purchase()"
						><el-icon class="el-icon--left"><ShoppingTrolley /></el-icon> 购买课程
					</el-button>

					<el-button size="small" class="cobutton bold" type="warning" @click="Savecourse()">
						<el-icon v-if="!Save" class="el-icon--left"><Star /></el-icon>
						<el-icon v-else class="el-icon--left"><StarFilled /></el-icon>{{ Save ? '已收藏' : '收藏课程' }}
					</el-button>
					<el-button size="small" class="cobutton bold" type="danger">
						<el-icon class="el-icon--left"><Headset /></el-icon> 联系客服
					</el-button>
				</div>
			</div>
		</div>
		<!-- 领券页 -->
		<el-dialog class="receivebox" v-model="dialogVisible" title="领券" :width="coreminwidth" :before-close="handleClose">
			<div v-loading="loading" class="columnLayout minaxgap">
				<div v-for="(item, index) in Canbeclaimed" :key="index" class="coupon">
					<div>
						<span class="maxfonz">{{ item.Conditions > 0 ? '满$' + item.Conditions + '减$' + item.Amount : '通用$' + item.Amount + '券' }}</span>
						<div class="minifonz">领取截至:{{ item.redeem_end_time }}</div>
					</div>
					<div v-if="!item.receive" class="receive" @click="setreceive(item.id)"><div>领</div> <div>取</div></div>
					<div v-else class="iconfont icon-yilingqu receives"></div>
					<div></div>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="dialogVisible = false">关闭</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 传入订单号 -->
		<settlement v-if="Purchasecourses" @custom-event="Purchasesuccessful" :info="info" :key="key"></settlement>
	</div>
</template>
<script>
	import { ref, onMounted, watch } from 'vue'
	import { mapState } from 'vuex'
	import settlement from '@/components/settlement'
	import { dataRequest as api } from '@/api/api'
	export default {
		name: 'name',
		props: ['courseinfo', 'Whethertobuy'],
		computed: {
			...mapState(['user']),
		},
		components: {
			// 组件
			settlement,
		},
		data() {
			return {
				coreminwidth: '400',
				playloading: false,
				loading: false,
				dialogVisible: false,
				Purchasecourses: false,
				Canbeclaimed: [],
				key: 0,
				info: [],
				Save: false,
				//返回值
			}
		},
		methods: {
			//
			Purchasesuccessful() {
				this.$emit('verifycourse', '')
			},
			study() {
				this.$emit('custom-event', 'Tableofcontents')
			},
			// 收藏课程
			async Savecourse() {
				let arr = await api(['Savecourse', this.courseinfo.id])
				if (arr.code == 200) {
					// 收藏或者取消哦收藏成功
					this.Save = !this.Save
					if (this.Save) {
						this.$message.success('收藏成功')
					} else {
						this.$message.success('取消成功')
					}
				} else {
					this.$message.error('请先登陆')
				}
			},
			// 判断是否收藏
			async getSavecourse() {
				let arr = await api(['getSavecourse', this.courseinfo.id])
				console.log(arr)
				if (arr.code == 200) {
					this.Save = true
				}
			},

			// 领券
			async setreceive(ele) {
				// 发送券ID
				this.loading = true
				let arr = await api(['setreceive', ele])

				if (arr.code == 200) {
					this.$message.success('领取成功')
					await this.vouchers()
				} else {
					this.$message.error('领取失败')
				}
				this.loading = false
			},
			//领券显示所有   领券页只显示未领取的券
			//
			async vouchers() {
				//    传递商品类型和商品ID

				let arr = await api(['Unclaimedvouchers', { Category: '1', ProductID: this.courseinfo.id }])

				if (arr.code == 200) {
					this.Canbeclaimed = arr.data
					console.log(arr.data)
					this.dialogVisible = true
				} else {
					this.$message.error(arr.data)
				}
			},
			// 函数
			async purchase() {
				this.playloading = true
				let arr = await api(['CreateOrder', [{ id: this.courseinfo.id, type: 1 }]])

				if (arr.code == 200) {
					this.info = arr.data[0]
					console.log(this.info)
					this.Purchasecourses = true
					this.key++
				} else {
					this.$alert(arr.massage + ':' + arr.data, '', {
						confirmButtonText: '确定',
						callback: action => {},
					})
				}
				this.playloading = false
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done()
					})
					.catch(_ => {})
			},
			handleResize() {
				// 使用媒体查询判断屏幕尺寸，并根据不同的尺寸修改播放器容器的大小

				if (window.matchMedia('(max-width: 860px)').matches) {
					this.coreminwidth = '320'
				} else {
					this.coreminwidth = '400'
				}
			},
		},
		mounted() {
			// 生命周期:
			window.addEventListener('resize', this.handleResize)
			this.handleResize()
			if (this.user) {
				this.getSavecourse()
			}
		},
		watch: {
			user(newMedium, old) {
				console.log('收藏')
				if (newMedium) {
					// 获取是否收藏
					this.getSavecourse()
				}
				// 在 medium 属性发生变化时重新初始化播放器
			},
		},
		beforeDestroy() {
			window.removeEventListener('resize', this.handleResize)
		},
	}
</script>
<style>
	.my-label {
		color: var(--el-color-info-light-3) !important;
	}
	.my-content {
		color: #f56c6c !important;
		font-size: 20px;
		font-weight: bold !important;
	}
	.thumbnail {
		width: 570px;
		height: 233px;
	}
	.image-slot {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 570px;
		height: 233px;
		background: var(--el-fill-color-light);
		color: var(--el-text-color-secondary);
		font-size: 30px;
	}
	.el-statistic__content {
		width: 100%;
		font-weight: inherit; /* 清除字体粗细 */
		font-size: inherit; /* 清除字体大小 */
		color: inherit;
	}
	.el-icon--left {
		font-size: 18px;
		font-weight: bold !important;
	}
	.receivebox > .el-dialog__body {
		padding-top: 0px !important;
		padding-bottom: 0px !important;
	}
</style>
<style scoped>
	.coupon {
		height: 80px;
		display: grid;
		grid-template-columns: 1fr 80px;
		position: relative;
	}
	.coupon > .receive {
		background-color: #f56c6c;
		border-radius: 4px;
		display: flex;
		flex-direction: column;
		align-items: center; /* 子元素垂直居中 */
		justify-content: center; /* 子元素水平居中 */
		font-size: 16px;
		font-weight: bold;
		gap: 10px;
		color: #ffff;
	}
	.coupon .receives {
		background-color: #f89898;
		border-radius: 4px;
		display: flex;
		align-items: center; /* 子元素垂直居中 */
		justify-content: center; /* 子元素水平居中 */
		color: #ffff;
		font-size: 60px;
	}

	.coupon > div:nth-child(1) {
		background-color: #f56c6c;
		border-radius: 4px;
		display: flex;
		flex-direction: column;
		align-items: center; /* 子元素垂直居中 */
		justify-content: center; /* 子元素水平居中 */
		color: #ffff;
		gap: 10px;
	}
	.coupon > div:nth-child(3) {
		border-left: 1px dashed #ffffff;
		width: 1px;
		position: absolute;
		height: 96px;
		top: 2px;
		right: 79.5px;
	}

	.coupon .maxfonz {
		font-size: 18px;
		font-weight: bold;
	}

	.coupon .minifonz {
		font-size: 11px;
	}
	.cobutton {
		width: 150px;
	}
	.corebox {
		color: #ffff;
		display: grid;
		height: 57px;
		font-size: 18px;
		background: url(./../assets/img/ceo-back.png);
	}
	.corezzcn {
		font-weight: bold;
	}
	.coreinfo {
		display: flex;
		flex-direction: column;
		place-content: space-between;
	}
	.minfont {
		font-size: 12px;
	}
	.coursecomtwo {
		display: flex;
		flex-direction: row;
		gap: 20px;
	}
	@media screen and (max-width: 860px) {
		.appmain {
			width: 100vw;
		}
		.corebox {
			height: 0.4rem;
			font-size: 0.16rem;
		}
		.coreinfo {
			gap: 0.1rem;
		}
		.my-content {
			font-size: 0.17rem;
		}
		.cobutton {
			width: 1rem;
		}
	}
</style>
